<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示器尺寸生成</title>
		<script src="其他/屏幕显示器.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#h,#w,#fw,#fh {
				width: 30px;
			}
			#in {
				width: 50px;
			}
			#box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
			}
			#box>div:hover * {
				opacity: 1;
			}
			img {
				width: 100%;
				height: 100%;
			}
			#box>div:hover {
				opacity: 0.5;
			}
			body {
				background-color: #e8e8e8;
				width: 100%;
				height: 100%;
				z-index: -999;
			}
			#heard {
				border: 3px solid #000;
				background-color: #9f9f9f;
				width: 300px;
				padding: 20px;
			}
			#show{
				width: 365px;
			}
			#details{
				width: 370px;
			}
		</style>
	</head>
	<body>
		<div id="heard">
			■控制面板■
			<br>
			<a class="active" href="https://act_meteor.rth1.me/">返回主页</a>
			<br>
			<label>英寸：<input type="number" id="in" min=".1" max="45" />寸</label>
			<br>
			<label>长宽比:<input id="h" type="number"min="1"/>:<input id="w" type="number"min="1"/></label>
			<br>
			<button type="button" onclick="add()">添加</button>
			<button type="button" onclick="bug()">无法拖动点我</button>
			<br>
			分辨率:<input id="fw" />X<input id="fh" /><button onclick="img()">生成分辨率图片</button>
		</div>
		<div id="details">
			<details>
				<summary>使用方法</summary>
				<p>*本网站仅用于屏幕大小对比与相同分辨率下的显示效果，仅供参考。</p>
				<p style="color: red;">■使用方法■</p>
				<p>1、输入屏幕尺寸和比例即可生成对应的大小</p>
				<p>2、点击色块可以置于最顶层顶层</p>
				<p>3、生成后才能添加分辨率图片哦</p>
				<p>4、色块半透明时可以拖动色块移动位置</p>
				<p>5、点击对应颜色的文字可以删除屏幕</p>
				<p>网站@ACT丶流星雨，截取代码、搬运请注明出处</p>
			</details>
		</div>
		<div id="show">
		</div>
		<divs id="box">
		</divs>
		<div id="FWTJ">
			<iframe src="https://shimo.im/forms/GqRPrK86xp8qjGrW/fill" width="1" height="1"></iframe>
		</div>
	</body>
</html>
